import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as loadActions from "../../store/loadAction"
export class Kapian extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
  
    }
  }
  componentDidMount(){
    this.props.getLoadListAction()
    this.bs=new BScroll(".bs",{
      pullDownRefresh:true,
      pullUpLoad:true
    })
    this.bs.on("pullingup",_.debounce(()=>{
      console.log("上拉",this.loadRef)
      this.loadRef.current.style.display="block"
      this.bs.refresh()
      setTimeout(() => {
        this.props.loadActions()
        this.bs.finishPullUp()
        this.loadRef.current.style.display="none"
        
      }, 2000);
    },1000))
    this.bs.on("pullingDown",_.debounce(()=>{
      console.log("下拉",this.refreshRef)
      this.refreshRef.current.style.display="block"
      this.bs.refresh()
      setTimeout(() => {
        this.props.getLoadListAction()
        this.bs.finishPullDown()
        this.refreshRef.current.style.display="none"
        
      }, 2000);
    },1000)) 
  }
    componentDidMount() { 
      this.bs.refresh()
     }

 
  render() {
    const {sliceList}=this.props
    return (
      <div className='bs'>
        <ul className='list'>
          <h1>刷新中...</h1>
          { sliceList.length ?sliceList.map((item,index)=>{

          }):'暂无数据'    }
         <h1 ref={this.loadRef} className="loadmore">加载中。。。</h1>
      

        </ul>
        

      </div>
    )
  }
}

const mapStateToProps = (state) => ({
//  ...state.reducer
 ...state.loadReducer
})

const mapDispatchToProps = (dispatch)=>{
  let loadA=bindActionCreators(loadActions,dispatch)
  return{
    ...loadA
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Kapian)